<template>
  <Tabs v-model:activeKey="activeKey" centered :tabBarGutter="80">
    <TabPane key="field" tab="控件属性" />
    <TabPane key="form" tab="表单属性" />
  </Tabs>
  <div class="right-box">
    <div v-if="!isEmpty(activeComp)">
      <div v-show="activeKey === 'field'" class="p-3">
        <Form :label-col="{ span: 7, offset: 0 }">
          <FormItem label="标签名称">
            <Input v-model:value="activeComp.__config__.label" placeholder="请输入标签" />
          </FormItem>
          <FormItem label="标签宽度">
            <Slider v-model:value="activeComp.__config__.labelCol.span" :max="24" :min="2" />
          </FormItem>
          <FormItem label="栅格布局">
            <Slider v-model:value="activeComp.span" :max="24" :min="2" />
          </FormItem>
          <FormItem label="字段名称">
            <Input
              v-model:value="activeComp.__config__.name"
              placeholder="请输入字段名称 (v-model)"
            />
          </FormItem>
          <FormItem label="提示信息">
            <Input v-model:value="activeComp.__config__.extra" placeholder="请输入提示信息" />
          </FormItem>
          <!-- 组件配置 -->
          <component :is="activeComp.tag + 'Option'" />
          <template v-if="!filterConfig.required.includes(activeComp.tag)">
            <Divider>正则校验</Divider>
            <FormItem label="是否必填">
              <Switch v-model:checked="required" />
            </FormItem>
            <FormItem label="表达式">
              <Input v-model:value="pattern" placeholder="请输入正则" />
            </FormItem>
            <FormItem label="错误提示">
              <Input
                v-model:value="activeComp.__config__.rules[0].message"
                placeholder="请输入错误提示"
              />
            </FormItem>
          </template>
        </Form>
      </div>
      <div v-show="activeKey === 'form'" class="p-3">
        <Form :label-col="{ span: 7, offset: 0 }">
          <FormItem label="表单名称">
            <Input v-model:value="formConf.name" placeholder="请输入表单名称" />
          </FormItem>
          <FormItem label="表单布局">
            <RadioGroup v-model:value="formConf.layout" button-style="solid">
              <RadioButton value="horizontal">水平</RadioButton>
              <RadioButton value="vertical">垂直</RadioButton>
              <RadioButton value="inline">内联</RadioButton>
            </RadioGroup>
          </FormItem>
          <FormItem label="标签对齐">
            <RadioGroup v-model:value="formConf.labelAlign" button-style="solid">
              <RadioButton value="left">左对齐</RadioButton>
              <RadioButton value="right">右对齐</RadioButton>
            </RadioGroup>
          </FormItem>
          <FormItem label="栅格间距">
            <InputNumber v-model:value="formConf.gutter" :min="0" />
          </FormItem>
          <FormItem label="显隐冒号">
            <Switch v-model:checked="formConf.colon" />
          </FormItem>
          <FormItem label="标签换行">
            <Switch v-model:checked="formConf.labelWrap" />
          </FormItem>
        </Form>
      </div>
    </div>
    <div v-else>未选中组件</div>
  </div>
</template>
<script lang="tsx" setup>
  import { ref, toRefs, computed } from 'vue';
  import {
    Tabs,
    TabPane,
    Form,
    FormItem,
    Input,
    Slider,
    Switch,
    Radio,
    InputNumber,
    Divider,
  } from 'ant-design-vue';
  import { isEmpty } from 'lodash-es';
  import { useFormStore } from '/@/store/modules/workFlow/form';
  import { filterConfig } from '/@/store/modules/workFlow/data';
  const RadioGroup = Radio.Group;
  const RadioButton = Radio.Button;
  const store = useFormStore();
  const { activeComp, formConf } = toRefs<any>(store);

  const activeKey = ref('field');
  const pattern = computed({
    get: () => pattern.value,
    set: (value) => {
      if (value) {
        activeComp.value.__config__.rules[0].pattern = new RegExp(value, 'g');
      } else {
        delete activeComp.value.__config__.rules[0].pattern;
      }
    },
  });

  const required = computed({
    get: () => activeComp.value.__config__.required,
    set: (value) => {
      activeComp.value.__config__.rules[0].required = value;
      activeComp.value.__config__.required = value;
    },
  });
</script>
<style lang="less" scoped>
  @import './index.less';
</style>
